<template>
  <el-input style="width: 20em" maxlength="8" show-word-limit v-model="input"
            placeholder="搜索已加入的班级" @input="inputEvent">
  </el-input>
  <el-button type="primary" style="margin-left: 1em" @click="clickFind">查找</el-button>
  <div @click="clickItem(index)" v-for="(item,index) in findClass as Class[]" id="findClassResult" v-if="!findNothing && findClass!=undefined">
    <p>{{ item.name }}</p>
    <p style="color: #ccc">{{ item.code }}</p>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {ClassRequest} from "../../request/MyRequset";
import {Class, User} from "../../types/mytypes";
import {PageStore, UserStore} from "../../store/store";
import router from "../../router/router";

let input = ref("")
let findNothing = ref(false)
let findClass = ref<Class[]|undefined>(undefined)
const mUser:User = UserStore.getUser()
let userAllClass = ref([] as Class[])

const inputEvent = ()=>{
  console.log("input")
  setTimeout(async ()=>{
    await clickFind();
  },200)
}
const clickFind = async () => {
  findClass.value = []
  let iv:string = input.value;
  if(iv=="")return;
  for (let i = 0;i < userAllClass.value.length;i++){
    let mClass:Class = userAllClass.value[i]
    if(mClass.name.includes(iv)){
      findClass.value.push(mClass)
    }
  }
}

onMounted(async ()=>{
  let findRes = await ClassRequest.userGetAll(mUser.id)
  userAllClass.value = findRes.data;
})

const clickItem = (index:number)=>{
  PageStore.setNowClass((findClass.value as Class[])[index]);
  router.push({name: "myClassInfo"});
}
</script>

<style scoped lang="scss">
#findClassResult {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 61%;
  height: 4em;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px #ececec solid;
  margin-top: 1em;
  user-select: none;
}

#findClassResult:hover {
  border: 1px #409eff solid;
  cursor: pointer;
}
</style>